<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2022-07-26 19:06:01
 * @LastEditTime: 2022-09-06 17:20:25
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description:
 * @FilePath: \pepc-web\src\views\Demo\Video\index.vue
 * Copyright 版权声明
-->
<template>
  <div class="page-home app-container">
    <video ref="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"></video>
    <h2>{{subtitleText}}</h2>
  </div>
</template>

<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'

const VideoSrtText = `1
00:00:17,625 --> 00:00:18,800
同学们好

2
00:00:18,800 --> 00:00:21,025
今天我们继续学习

3
00:00:21,025 --> 00:00:25,500
关于中医养生保健的基本理论课程

4
00:00:25,500 --> 00:00:28,250
那么这部分内容听起来比较枯燥

5
00:00:28,250 --> 00:00:29,225
抽象

6
00:00:29,225 --> 00:00:30,075
但呢

7
00:00:30,075 --> 00:00:33,075
它是我们中华民族智慧的结晶

8
00:00:33,075 --> 00:00:35,425
是养生学的奠基石

9
00:00:35,425 --> 00:00:38,325
也是中医理论体系当中

10
00:00:38,325 --> 00:00:40,625
最重要的组成部分之一

11
00:00:40,625 --> 00:00:43,050
相信只要我们认真学习

12
00:00:43,050 --> 00:00:45,950
不但能够体会到它的博大精深

13
00:00:45,950 --> 00:00:48,396
还能给我们以及我们的家人

14
00:00:48,396 --> 00:00:49,925
带来益处

15
00:00:49,925 --> 00:00:50,725
那么下面

16
00:00:50,725 --> 00:00:53,875
我们就来一起学习今天的课程

17
00:00:53,875 --> 00:00:55,625
中医养生保健呢

18
00:00:55,625 --> 00:00:57,875
是建立在中医阴阳

19
00:00:57,875 --> 00:00:58,600
五行

20
00:00:58,600 --> 00:00:59,325
藏象

21
00:00:59,325 --> 00:01:02,000
经络等学说的指导下

22
00:01:02,000 --> 00:01:04,400
形成了独特的生命观

23
00:01:04,400 --> 00:01:05,925
整体养生观

24
00:01:05,925 --> 00:01:07,675
阴阳平衡观

25
00:01:07,675 --> 00:01:09,550
脏腑协调观

26
00:01:09,550 --> 00:01:11,650
经络畅通观

27
00:01:11,650 --> 00:01:13,250
从整体角度

28
00:01:13,250 --> 00:01:14,975
运动变化角度

29
00:01:14,975 --> 00:01:16,050
功能角度

30
00:01:16,050 --> 00:01:18,900
去把握生命的规律

31
00:01:18,900 --> 00:01:19,988
那么首先

32
00:01:19,988 --> 00:01:23,350
什么是中医的生命观呢

33
00:01:23,350 --> 00:01:25,175
生长壮老死

34
00:01:25,175 --> 00:01:27,800
是人类生命发展的规律

35
00:01:27,800 --> 00:01:30,250
中医对生命的形成

36
00:01:30,250 --> 00:01:31,150
寿夭

37
00:01:31,150 --> 00:01:31,975
天年

38
00:01:31,975 --> 00:01:32,725
衰老

39
00:01:32,725 --> 00:01:33,575
和死亡

40
00:01:33,575 --> 00:01:35,850
都是有独特的认识

41
00:01:35,850 --> 00:01:37,950
对于生命的形成

42
00:01:37,950 --> 00:01:40,525
《灵枢·本神》当中有说

43
00:01:40,525 --> 00:01:42,475
生之来谓之精

44
00:01:42,475 --> 00:01:45,050
两精相搏谓之神

45
00:01:45,050 --> 00:01:49,200
父母之精是构成生命将康的物质基础

46
00:01:49,200 --> 00:01:52,175
是生命的来源和根本

47
00:01:52,175 --> 00:01:53,875
那么生命的节律呢

48
00:01:53,875 --> 00:01:57,325
是生命固有的节律和极限的

49
00:01:57,325 --> 00:01:58,280
我们来看

50
00:01:58,280 --> 00:02:02,075
《素问·上古天真论》当中说道

51
00:02:02,075 --> 00:02:04,450
关于生长壮老死

52
00:02:04,450 --> 00:02:06,925
是有一个这样的节律图

53
00:02:06,925 --> 00:02:09,725
从上图当中我们可以看到

54
00:02:09,725 --> 00:02:14,050
女子从七岁发育到七七天癸竭

55
00:02:14,050 --> 00:02:16,375
男子从八岁发育期

56
00:02:16,375 --> 00:02:18,400
到八八天癸竭

57
00:02:18,400 --> 00:02:23,075
这呢正是生命发展的一个自然节律

58
00:02:23,075 --> 00:02:25,025
寿夭与天年

59
00:02:25,025 --> 00:02:26,125
中医认为

60
00:02:26,125 --> 00:02:28,725
衰老是整体机能的衰退

61
00:02:28,725 --> 00:02:31,175
是生命发展的必然规律

62
00:02:31,175 --> 00:02:33,825
但是我们可以通过养生保健

63
00:02:33,825 --> 00:02:36,525
来延长衰老的过程

64
00:02:36,525 --> 00:02:40,025
人的自然寿命应该是一百岁以上

65
00:02:40,025 --> 00:02:42,950
《灵枢·天年》有篇说道

66
00:02:42,950 --> 00:02:44,625
人上寿百岁

67
00:02:44,625 --> 00:02:45,825
中寿八十

68
00:02:45,825 --> 00:02:47,725
下寿六十

69
00:02:47,725 --> 00:02:50,675
历史上长寿的也不乏其人

70
00:02:50,675 --> 00:02:51,686
其中呢

71
00:02:51,686 --> 00:02:53,375
梁唐时代扬州

72
00:02:53,375 --> 00:02:56,275
王远知活到了126 岁

73
00:02:56,275 --> 00:02:59,750
唐代药王孙思邈活到 102 岁

74
00:02:59,750 --> 00:03:02,325
均是无疾而终

75
00:03:02,325 --> 00:03:05,550
那么当代呢也有众多百岁老人

76
00:03:05,550 --> 00:03:08,425
据中国老年学学会公布的

77
00:03:08,425 --> 00:03:10,725
百岁老人统计数据

78
00:03:10,725 --> 00:03:13,925
截至 2013 年7月 1 日

79
00:03:13,925 --> 00:03:16,500
中国 31个省市

80
00:03:16,500 --> 00:03:18,170
健在的百岁老人

81
00:03:18,170 --> 00:03:21,650
达到了54166 人

82
00:03:21,650 --> 00:03:24,175
这也是中国百岁老人数量

83
00:03:24,175 --> 00:03:27,525
首次突破5万人大关

84
00:03:27,525 --> 00:03:31,025
那么在新疆维吾尔族的阿丽米罕

85
00:03:31,025 --> 00:03:34,200
她于2021年12月16日去世

86
00:03:34,200 --> 00:03:37,000
她享年是135岁

87
00:03:37,000 --> 00:03:42,200
她也被认为是目前世界上最长寿的人

88
00:03:42,200 --> 00:03:43,819
虽然衰老死亡

89
00:03:43,819 --> 00:03:47,300
是生命过程当中不可避免的现象

90
00:03:47,300 --> 00:03:48,154
但是呢

91
00:03:48,154 --> 00:03:51,025
我们可以通过养生来养护生命

92
00:03:51,025 --> 00:03:52,100
延缓衰老

93
00:03:52,100 --> 00:03:54,450
保全天年

94
00:03:54,450 --> 00:03:56,000
中医养生保健学

95
00:03:56,000 --> 00:03:57,152
正是建立在

96
00:03:57,152 --> 00:04:00,025
对生命客观规律的基础上

97
00:04:00,025 --> 00:04:01,450
使人们能够

98
00:04:01,450 --> 00:04:02,800
尽终其天年

99
00:04:02,800 --> 00:04:05,250
度百岁乃去

100
00:04:05,300 --> 00:04:07,300
下面呢我们来看看

101
00:04:07,300 --> 00:04:11,200
中医养生保健的四个基本特点

102
00:04:11,200 --> 00:04:12,775
整体养生观

103
00:04:12,775 --> 00:04:14,450
阴阳平衡观

104
00:04:14,450 --> 00:04:15,675
脏腑协调观

105
00:04:15,675 --> 00:04:18,275
和经络畅通观

106
00:04:18,275 --> 00:04:19,100
第一个呢

107
00:04:19,100 --> 00:04:21,500
是整体养生观

108
00:04:21,500 --> 00:04:24,425
人体其实是一个有机的整体

109
00:04:24,425 --> 00:04:26,500
它以五脏为中心

110
00:04:26,500 --> 00:04:29,425
通过经络将人体的各个脏腑

111
00:04:29,425 --> 00:04:30,225
孔窍

112
00:04:30,225 --> 00:04:31,175
皮毛

113
00:04:31,175 --> 00:04:32,000
筋肉

114
00:04:32,000 --> 00:04:36,500
骨骼等组织呢紧密的联成了一个整体

115
00:04:36,500 --> 00:04:40,100
它们之间可以相互联系相互制约

116
00:04:40,100 --> 00:04:44,900
来维持生理活动的平衡和协调

117
00:04:44,900 --> 00:04:48,300
人与自然呢也是一个整体性的

118
00:04:48,300 --> 00:04:50,225
无论是四季寒暑

119
00:04:50,225 --> 00:04:51,975
还是昼夜阴阳

120
00:04:51,975 --> 00:04:53,225
不同的地域

121
00:04:53,225 --> 00:04:54,850
不同的地理环境

122
00:04:54,850 --> 00:04:56,050
居住的条件

123
00:04:56,050 --> 00:04:57,900
生活习惯等等

124
00:04:57,900 --> 00:05:00,325
这些呢都可以直接影响到

125
00:05:00,350 --> 00:05:02,675
人的生理活动

126
00:05:02,675 --> 00:05:03,875
中医认为

127
00:05:03,875 --> 00:05:05,325
人体 生理

128
00:05:05,325 --> 00:05:06,100
病理

129
00:05:06,100 --> 00:05:07,550
和某些的变化呢

130
00:05:07,550 --> 00:05:09,850
与天地自然的变化是有着

131
00:05:09,875 --> 00:05:11,950
直接的关系的

132
00:05:11,950 --> 00:05:12,700
因此

133
00:05:12,700 --> 00:05:15,590
养生必须要效法天地自然

134
00:05:15,590 --> 00:05:17,425
顺应四时阴阳

135
00:05:17,425 --> 00:05:19,950
适应四季的寒暑变化

136
00:05:19,950 --> 00:05:22,025
从而保证生命的存在

137
00:05:22,025 --> 00:05:24,650
保持身心健康

138
00:05:24,650 --> 00:05:27,450
第二是阴阳平衡观

139
00:05:27,450 --> 00:05:29,850
阴阳是自然界万事万物

140
00:05:29,850 --> 00:05:33,100
运动变化的根本规律

141
00:05:33,100 --> 00:05:35,975
《素问·阴阳应象大论》当中说道

142
00:05:35,975 --> 00:05:37,125
阴阳者

143
00:05:37,125 --> 00:05:38,575
天地之道也

144
00:05:38,575 --> 00:05:40,100
万物之纲纪

145
00:05:40,100 --> 00:05:41,525
变化之父母

146
00:05:41,525 --> 00:05:43,100
生杀之本始

147
00:05:43,100 --> 00:05:45,525
神明之府也

148
00:05:45,525 --> 00:05:48,150
这句话高度概括了阴阳

149
00:05:48,150 --> 00:05:51,750
是自然界神妙莫测的运动变化

150
00:05:51,777 --> 00:05:56,550
和一切事物生长化灭的内在动因

151
00:05:56,550 --> 00:05:59,175
阴阳之间是对立制约

152
00:05:59,175 --> 00:06:00,775
互根互用

153
00:06:00,775 --> 00:06:01,900
交感互藏

154
00:06:01,900 --> 00:06:05,325
消长转化的对立统一平衡关系

155
00:06:05,325 --> 00:06:07,050
那么阴阳平衡呢

156
00:06:07,075 --> 00:06:10,600
就是说阴阳双方保持协调

157
00:06:10,600 --> 00:06:12,700
既不过分也不偏衰

158
00:06:12,700 --> 00:06:16,425
呈现着一种协调的中和状态

159
00:06:16,425 --> 00:06:17,100
那么

160
00:06:17,100 --> 00:06:18,750
要保持这样的一个状态

161
00:06:18,750 --> 00:06:21,350
我们应当如何去做呢

162
00:06:21,350 --> 00:06:22,235
首先

163
00:06:22,235 --> 00:06:23,850
要法则天地

164
00:06:23,850 --> 00:06:25,600
来顺应自然

165
00:06:25,600 --> 00:06:27,475
中医养生保健有着

166
00:06:27,475 --> 00:06:28,875
四气调神

167
00:06:28,875 --> 00:06:30,050
春夏养阳

168
00:06:30,050 --> 00:06:31,350
秋冬养阴

169
00:06:31,350 --> 00:06:32,675
春捂秋冻

170
00:06:32,675 --> 00:06:33,200
以及

171
00:06:33,225 --> 00:06:34,347
春养肝

172
00:06:34,347 --> 00:06:35,625
夏养心

173
00:06:35,625 --> 00:06:36,725
秋养肺

174
00:06:36,725 --> 00:06:37,725
冬养肾

175
00:06:37,725 --> 00:06:39,525
这样的养生方法

176
00:06:39,525 --> 00:06:40,600
其次呢

177
00:06:40,600 --> 00:06:41,925
要协调阴阳

178
00:06:41,925 --> 00:06:43,450
中和有节

179
00:06:43,450 --> 00:06:45,402
重视生命活动当中的

180
00:06:45,402 --> 00:06:46,000
调

181
00:06:46,000 --> 00:06:47,175
与和

182
00:06:47,175 --> 00:06:48,875
不能够太过

183
00:06:48,875 --> 00:06:52,250
再者生病是起于过用

184
00:06:52,250 --> 00:06:53,050
七情

185
00:06:53,050 --> 00:06:53,600
劳力

186
00:06:53,600 --> 00:06:54,525
饮食等过度

187
00:06:54,525 --> 00:06:57,250
或者是起居失常

188
00:06:57,250 --> 00:06:58,750
滥用药物等等

189
00:06:58,750 --> 00:07:01,275
皆可成为致病的因素

190
00:07:01,275 --> 00:07:03,825
来危害我们的身体健康

191
00:07:03,825 --> 00:07:04,750
总之呢

192
00:07:04,750 --> 00:07:06,625
要达到阴平阳秘

193
00:07:06,625 --> 00:07:10,000
才能实现精神乃治

194
00:07:10,000 --> 00:07:12,900
第三是脏腑协调观

195
00:07:12,900 --> 00:07:15,450
中医在脏腑协调观当中

196
00:07:15,450 --> 00:07:17,750
将人体脏腑生理功能

197
00:07:17,750 --> 00:07:20,325
归纳为以五脏为中心的

198
00:07:20,325 --> 00:07:22,025
五大生理系统

199
00:07:22,025 --> 00:07:24,700
我们来看下面这个表格

200
00:07:24,700 --> 00:07:26,225
在这个表格当中

201
00:07:26,225 --> 00:07:27,207
我们看到

202
00:07:27,207 --> 00:07:30,223
五脏各系统之间是存在着生

203
00:07:30,223 --> 00:07:31,000
克

204
00:07:31,000 --> 00:07:31,750
乘

205
00:07:31,750 --> 00:07:33,700
侮的关系

206
00:07:33,700 --> 00:07:34,800
互相资生

207
00:07:34,800 --> 00:07:36,025
互相制约

208
00:07:36,025 --> 00:07:39,275
只有脏腑经络气血协调平衡

209
00:07:39,275 --> 00:07:41,065
这样呢才能够维护

210
00:07:41,065 --> 00:07:43,775
整体的协调平衡

211
00:07:43,775 --> 00:07:46,300
如果呢某一脏腑功能过亢

212
00:07:46,300 --> 00:07:47,452
或者是不足呢

213
00:07:47,452 --> 00:07:51,475
都会影响到生命的健康而带来疾病

214
00:07:51,475 --> 00:07:54,650
甚至呢会影响我们的寿命

215
00:07:54,650 --> 00:07:57,550
那么呢我们来举个例子理解一下

216
00:07:57,550 --> 00:08:01,125
为什么心情不好的时候就不想吃饭呢

217
00:08:01,125 --> 00:08:04,550
其实就是因为肝木乘脾土

218
00:08:04,550 --> 00:08:06,025
若肝失疏泄

219
00:08:06,025 --> 00:08:07,425
肝气郁结

220
00:08:07,425 --> 00:08:08,750
横逆犯脾

221
00:08:08,750 --> 00:08:10,575
导致脾胃虚弱

222
00:08:10,575 --> 00:08:11,825
升降失常

223
00:08:11,825 --> 00:08:12,401
这样呢

224
00:08:12,401 --> 00:08:16,500
就会引起食欲下降等等这种情况

225
00:08:16,500 --> 00:08:18,600
从养生角度而言

226
00:08:18,600 --> 00:08:21,875
一方面要强化脏腑的协同作用

227
00:08:21,900 --> 00:08:23,000
另一方面

228
00:08:23,000 --> 00:08:25,525
当脏腑间偶有失和

229
00:08:25,525 --> 00:08:27,350
应及时予以调整

230
00:08:27,350 --> 00:08:30,625
以纠正其偏差

231
00:08:30,625 --> 00:08:33,050
《素问·举痛论》当中所说

232
00:08:33,050 --> 00:08:34,975
百病皆生于气

233
00:08:34,975 --> 00:08:35,775
因此呢

234
00:08:35,775 --> 00:08:38,525
中医养生应当强调

235
00:08:38,525 --> 00:08:39,900
恬淡虚无

236
00:08:39,900 --> 00:08:41,157
精神调摄

237
00:08:41,157 --> 00:08:44,725
以纠正五脏气机的失和状态

238
00:08:44,725 --> 00:08:48,075
第四呢就是经络畅通观

239
00:08:48,075 --> 00:08:51,050
经络是经脉和络脉的总称

240
00:08:51,050 --> 00:08:53,075
是人体运行气血

241
00:08:53,075 --> 00:08:55,075
联系脏腑和体表

242
00:08:55,075 --> 00:08:57,625
以及全身各部的通道

243
00:08:57,625 --> 00:09:00,350
是人体功能的调控系统

244
00:09:00,350 --> 00:09:00,950
那么

245
00:09:00,950 --> 00:09:04,475
经络到底有什么作用呢

246
00:09:04,475 --> 00:09:07,325
首先呢经络可以沟通内外

247
00:09:07,325 --> 00:09:08,925
联络上下

248
00:09:08,925 --> 00:09:11,400
在经络的沟通和联络下

249
00:09:11,400 --> 00:09:13,825
人体各个不同组织器官的

250
00:09:13,825 --> 00:09:15,285
不同功能

251
00:09:15,285 --> 00:09:16,323
相互协调

252
00:09:16,323 --> 00:09:17,150
配合

253
00:09:17,150 --> 00:09:19,650
使人体成为一个表里

254
00:09:19,650 --> 00:09:20,550
上下

255
00:09:20,550 --> 00:09:21,300
前后

256
00:09:21,300 --> 00:09:22,225
内外

257
00:09:22,225 --> 00:09:24,150
彼此能够紧密联系

258
00:09:24,150 --> 00:09:26,800
协调共济的统一整体

259
00:09:26,800 --> 00:09:27,721
第二呢

260
00:09:27,721 --> 00:09:29,779
经络能够运行气血

261
00:09:29,779 --> 00:09:31,300
协调阴阳

262
00:09:31,300 --> 00:09:33,175
它有内溉脏腑

263
00:09:33,175 --> 00:09:35,625
外濡腠理的作用

264
00:09:35,625 --> 00:09:38,085
它可以将我们人体的营养物质

265
00:09:38,085 --> 00:09:41,775
输布到全身各个器官和组织

266
00:09:41,775 --> 00:09:43,500
以五脏为中心

267
00:09:43,500 --> 00:09:45,500
经络呢是通道

268
00:09:45,500 --> 00:09:46,975
通过它的联属

269
00:09:46,975 --> 00:09:50,000
人体构成一个有机的整体

270
00:09:50,000 --> 00:09:52,600
在养生保健的过程当中

271
00:09:52,600 --> 00:09:54,775
各种养生保健方法

272
00:09:54,775 --> 00:09:57,200
通过经络的传导和感应

273
00:09:57,200 --> 00:09:59,050
来联系和调节

274
00:09:59,050 --> 00:10:01,950
使脏腑阴阳协同平衡

275
00:10:01,950 --> 00:10:04,100
达到了补虚泻实

276
00:10:04,100 --> 00:10:05,275
通达气血

277
00:10:05,275 --> 00:10:08,350
防病延年的目的

278
00:10:08,350 --> 00:10:11,175
以上呢就是我们今天学习的内容

279
00:10:11,175 --> 00:10:13,475
谢谢大家

`
// console.log(`🚀 ~ file: index.vue ~ line 18 ~ VideoSrt`, VideoSrtText)

export default {
  name: 'home',

  data() {
    return {
      subtitleText: '',
      currentTime: 0,
      videoStrItem: [],
      player: null,
      options: {
        autoplay: 'muted',
        controls: true,
        controlBar: {
          currentTimeDisplay: true, // 当前时间
          timeDivider: true, // 时间分割线
          durationDisplay: true, // 总时间
          progressControl: true, // 进度条
          remainingTimeDisplay: true, //
          customControlSpacer: true, //
          fullscreenToggle: true, // 全屏按钮
          volumePanel: true
        },
        sources: [
          {
            src: '/Videos/video.mp4',
            type: 'video/mp4'
          }
        ]
      }
    }
  },
  watch: {
    currentTime() {
      // //根据字幕切换选择所需要的字幕数组
      // let arr = this.srtMap[this.subtitleIndex]
      //赋值给subtitleText，此值用v-html进行了绑定，绑定到了对应的字幕显示区域
      this.subtitleText = this.getSubtitle(this.currentTime, this.videoStrItem)
      console.log(`🚀 ~ file: index.vue ~ line 1176 ~ currentTime ~ this.subtitleText`, this.subtitleText)
    }
  },

  created() {
    this.videoStrItem = this.createSrtArr(VideoSrtText)
    console.log(`🚀 ~ file: index.vue ~ line 1147 ~ created ~ this.videoStrItem`, this.videoStrItem)
  },

  mounted() {
    this.player = videojs(this.$refs.videoPlayer, this.options, () => {
      this.player.on('play', () => {
        console.log('开始播放')
      })
      //设置默认2倍速
      // this.player.playbackRate(2)
      // 监听video播放器播放时间的变化(延迟6秒重新加载)
      this.player.on('timeupdate', () => {
        // const currentTime = Math.floor(this.player.currentTime())
        const currentTime = this.player.currentTime()
        console.log(`🚀 ~ file: index.vue ~ line 1184 ~ this.player.on ~ currentTime`, currentTime)
        this.currentTime = currentTime
        // // 计算表最新推流的时间和现在播放器播放推流的时间
        // const differTime = this.player.buffered().end(0) - this.player.currentTime()
        // console.log(`🚀 ~ file: index.vue ~ line 1185 ~ differTime`, differTime)
        // // 差值大于6s时进行重新加载直播流
        // if (differTime >= 6) {
        //   console.log('重新加载视频流')
        //   this.player.src(this.player.currentSrc())
        //   this.player.load()
        //   this.player.play()
        // }
      })
    })
  },

  beforeUnmount() {
    if (this.player) {
      this.player.dispose()
    }
  },

  methods: {
    // 二分查找
    getSubtitle(currentTime, arr) {
      let low = 0; let high = arr.length
      let mid, htmlText
      while (low <= high) {
        mid = parseInt((low + high) / 2)
        if (arr[mid].from <= currentTime && arr[mid].to >= currentTime) {
          htmlText = arr[mid].htmlText
          break
        }
        if (arr[mid].from > currentTime) {
          high = mid - 1
        }
        if (arr[mid].to < currentTime) {
          low = mid + 1
        }
      }
      return htmlText
    },
    createSrtArr(srt) {
      const arr = srt.split(/\n\n|\r\r|\r\n\r\n/)
      const result = []
      arr.forEach(item => {
        const srtObj = {}
        const containArr = item.split(/\n/)

        if (containArr[1]) {
          //此处正则用于取出00:00:00，213 --> 00:00:00，213这种结构，防止可能存在于此行的x，y坐标对后续处理造成影响
          var reg = /^(\d{2}):(\d{2}):(\d{2})[\.,](\d{1,3}) --\> (\d{2}):(\d{2}):(\d{2})[\.,](\d{1,3})/g
          const regResult = reg.exec(containArr[1])
          if (regResult) {
            const timeSplit = regResult[0].split(' --> ')
            srtObj.from = this.getSeconds(timeSplit[0])
            srtObj.to = this.getSeconds(timeSplit[1])
            //这里的两个replace主要是将srt中可能携带的font标签转化为易用的span，当时遇到了如果是font标签的话没办法继承父元素的字体大小的问题，题外话：本次字母字体大小采用了媒体查询进行设置
            srtObj.htmlText = containArr.slice(2).join(`<br/>`).replace(/\<font/g, '<span').replace(/\<\/font/g, '</span')
            result.push(srtObj)
          }
        }
      })
      return result
    },
    //将srt中的字符串时间转化为所需要的格式，这里转化成了秒数
    getSeconds(val) {
      const arr = val.split(/\,|\./)
      let sec = 0
      const a = arr[0].split(':')
      sec = Number(a[0]) * 60 * 60 + Number(a[1]) * 60 + Number(a[2]) + arr[1] / 1000
      return sec
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
// /*base code*/
// .animated {
//   -webkit-animation-duration: 1s;
//   animation-duration: 1s;
//   -webkit-animation-fill-mode: both;
//   animation-fill-mode: both;
// }
// .animated.infinite {
//   -webkit-animation-iteration-count: infinite;
//   animation-iteration-count: infinite;
// }
// .animated.hinge {
//   -webkit-animation-duration: 2s;
//   animation-duration: 2s;
// }
// /*the animation definition*/
// @-webkit-keyframes fadeInUpBig {
//   0% {
//     opacity: 0;
//     -webkit-transform: translate3d(0, 2000px, 0);
//     transform: translate3d(0, 2000px, 0);
//   }
//   100% {
//     opacity: 1;
//     -webkit-transform: none;
//     transform: none;
//   }
// }
// @keyframes fadeInUpBig {
//   0% {
//     opacity: 0;
//     -webkit-transform: translate3d(0, 2000px, 0);
//     -ms-transform: translate3d(0, 2000px, 0);
//     transform: translate3d(0, 2000px, 0);
//   }
//   100% {
//     opacity: 1;
//     -webkit-transform: none;
//     -ms-transform: none;
//     transform: none;
//   }
// }
// .fadeInUpBig {
//   -webkit-animation-name: fadeInUpBig;
//   animation-name: fadeInUpBig;
// }
</style>
